<style lang="sass" scoped>
    .container{
        background:#EDEDED;
        padding:58px 26px 140px;
    }
    .submit{
        width:100%;
        height:120px;
        line-height:120px;
        text-align:center;
        background:#FF7373;
        position:fixed;
        bottom:0;
        left:0;
        font-size:40px;
        color:#fff;
    }
    .cont{
        margin-bottom:20px;
        .title{
            height:58px;
            line-height:58px;
            font-size:30px;
            color:#3c3c3c;
            border-bottom:1px solid #3c3c3c;
            span{
                font-size:24px;
                color:#3C3C3C;
            }
        }
        .box{
            margin-top:34px;
            padding:0 120px;
            display:flex;
            flex-wrap:wrap;
            justify-content:space-between;
            .group{
                display:flex;
                width:161px;
                margin-bottom:15px;
                font-size:24px;
                img{
                    width:40px;
                    height:40px;
                    margin-left:10px;
                }
            }
            &.box2{
                padding:0;
                justify-content:flex-start;
                .add-img{
                    width:150px;
                    height:150px;
                    margin-right:20px;
                }
            }
        }
        .textarea{
            width:700px;
            height:320px;
            background:#fff;
            border-radius:30px;
            margin-top:40px;
            padding:20px;
            font-size:30px;
        }
    }
</style>
<template>
    <div class="container">
        <div class="cont">
            <div class="title">问题类型</div>
            <div class="box">
                <!-- <div class="group">设备问题<img src="../../assets/images/p_choice.png" alt=""></div>
                <div class="group">微信问题<img src="../../assets/images/p_choice.png" alt=""></div>
                <div class="group">电视问题<img src="../../assets/images/p_choice.png" alt=""></div> -->
                <div @click="post.problemTypeId = item.id" v-for="(item,i) in listProblem" class="group">
                    {{item.problemTypeName}}
                    <img v-if="post.problemTypeId===item.id" src="../../assets/images/p_choice.png" alt="">
                    <img v-else src="../../assets/images/p_nochoice.png" alt="">
                </div>
            </div>
        </div>
        <div class="cont">
            <div class="title">问题描述</div>
            <textarea v-model.trim="post.problemDesc" class="textarea"></textarea>
        </div>
        <div class="cont">
            <div class="title">上传图片<span>(数量限制3张)</span></div>
            <div class="box box2">
                <img v-if="post.problemImg.length<3" @click="choice()" class="add-img" src="../../assets/images/add_img.png" alt="">
                <img v-for="item in post.problemImg" :src="item" class="add-img">
            </div>
        </div>

        <div @click="saveProblemFeedback()" class="submit">提 交</div>
    </div>
</template>
<script>
    export default {
        components: {
        },
        data() {
            return {
                listProblem:[],
                post:{
                    problemTypeId:'',//	是	int	问题类型ID
                    terminal:'',//	是	string	终端
                    problemDesc:'',//	是	string	问题描述
                    contactInfo:'',//	否	string	联系方式
                    problemImg:[],//	否	string	问题图片，多个用,隔开
                }
            }
        },
        watch:{
        },
        created(){
            this.listProblemType();
        },
        mounted() {
            this.$nextTick(() => {
                $('body')[0].style.backgroundColor = '#EDEDED';
            });
        },
        methods: {
            listProblemType(){
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/problemFeedback/listProblemType',
                    success:(data=>{
                        this.listProblem = data.data;
                    })
                })
            },
            saveProblemFeedback(){
               let param = JSON.parse(JSON.stringify(this.post)) 
               if(param.problemTypeId===''){
                   popup.alert({content:'请选择问题类型'});
                   return;
               }
               if(param.problemDesc===''){
                   popup.alert({content:'请填写问题描述'});
                   return;
               }
               param.problemImg = param.problemImg.toString();
               if(this.$route.query.terminal)param.terminal = this.$route.query.terminal
               util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/problemFeedback/saveProblemFeedback',
                    data:param,
                    success:(()=>{
                        popup.miss({content:'提交成功！'});
                    })
                })
            },
            choice(){
                console.log('choice')
                wx.chooseImage({
                    count: 1, // 默认9
                    sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
                    sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
                    success:  (res)=> {
                        var localIds = res.localIds; // 返回选定照片的本地ID列表，localId可以作为img标签的src属性显示图片
                        wx.uploadImage({
                            localId: localIds[0], // 需要上传的图片的本地ID，由chooseImage接口获得
                            isShowProgressTips: 1, // 默认为1，显示进度提示
                            success:  (res)=> {
                                var serverId = res.serverId; // 返回图片的服务器端ID
                                util.ajax({
                                    url:config.baseApi + 'bookMall-h5/api/problemFeedback/uploadImg',
                                    data:{
                                        mediaId:serverId
                                    },
                                    success:((data)=>{
                                        console.log(data)
                                        if(this.post.problemImg.length<3)this.post.problemImg.push(data.data)
                                        console.log(this.post.problemImg)
                                    })
                                })
                            }
                        });
                        
                    }
                });
            }
        },
        
    };
</script>